/*
 * @Date: 2025-06-13 10:50:10
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2025-09-09 18:50:11
 * @FilePath: \corpus\src\components\Priview\json.tsx
 */
import { Modal } from 'antd';
import type React from 'react';

import { priveiwUrl } from '@/services/ant-design-pro/foundation';
import { useModel } from '@umijs/max';
import { useEffect, useState } from 'react';
import ReactJson from 'react-json-view';

const JsonPriview: React.FC = () => {
  const { jsonViewVisible, setJsonViewVisible, url } = useModel('useTree', (model) => {
    return {
      jsonViewVisible: model.jsonViewVisible,
      url: model.url,

      setJsonViewVisible: model.setJsonViewVisible,
    };
  });

  const title = '预览文件';

  const [data, setData] = useState(null);
  const handleSubmit = () => {
    setJsonViewVisible(false);
  };

  useEffect(() => {
    if (jsonViewVisible) {
      priveiwUrl(url).then((res) => {
        console.log(res);
        if (res) {
          const data = URL.createObjectURL(res);
          setData(data);
        }
      });
    }
  }, [url, jsonViewVisible]);

  return (
    <Modal
      width={700}
      title={title}
      open={jsonViewVisible}
      onCancel={() => {
        setJsonViewVisible(false);
      }}
      onOk={handleSubmit}
    >
      <div>
        {jsonViewVisible && data && (
          <ReactJson src={data} theme="monokai" collapsed={1} enableClipboard={false} />
        )}
      </div>
    </Modal>
  );
};

export default JsonPriview;
